<template>
	<view class="big-box">
		<!-- 顶部 返回/名字/在线情况/更多 -->
		<view class="top-box">
			<!-- 左侧 -->
			<view class="top-left-box">
				<!-- 返回btn -->
				<view class="back-btn" @click="back">
					<image class="back-btn-pic" src="../../static/pic/chat/back.png" mode=""></image>
				</view>
				<!-- 姓名/在线情况 -->
				<view class="other-info">
					<!-- 对方用户名 -->
					<view class="other-name">
						{{duixiang_data.name}}
					</view>
					<!-- 对方在线情况 -->
					<view class="other-online">
						{{duixiang_data.online?'今日在线':'已下线'}}
					</view>
				</view>
			</view>
			<!-- 右侧 -->
			<view class="top-right-box">
				<!-- 更多 -->
				<view class="top-more">
					<image class="top-more-pic" src="../../static/pic/chat/more-dot.png" mode=""></image>
				</view>
			</view>
		</view>

		<!-- 消息框 -->
		<view class="msg-box">
			<!-- 内容行 -->
			<view class="msg-item" v-for="item of msgArr" :key="item.mid">
				<!-- 时间信息 -->
				<view class="msg-time">
					{{item.msgTime}}
				</view>
				<!-- 消息盒子 -->
				<view class="msg-content-box">
					<!-- 对方消息 -->
					<view class="other-msg">
						<view class="touxiang" v-show="!item.me">
							<image :class="duixiang_data.upImg?'full-pic':'small-pic'" :src="duixiang_data.pic" mode="">
							</image>
						</view>
					</view>

					<!-- 消息内容 -->
					<view class="msg-content " :class="item.me?'right-msg':'left-msg'">
						<view class="msg-send">
							{{item.msg}}
						</view>
					</view>
					<!-- 自己消息 -->
					<view class="self-msg">
						<!-- 头像 -->
						<image class="touxiang" v-show="item.me" :src="self_user_data.pic" mode="">
						</image>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 动作(戳一戳等)/语音/消息/表情/商品/更多 -->
		<view class="bottom-box">
			<!-- 快捷表情 -->
			<view class="fast-emoji">
				<view class="fast-emoji-item" v-for="item of bottomArr" :key="item.tid">
					<image class="fast-emoji-pic" :src="item.pic" mode=""></image>
					{{item.text}}
				</view>
			</view>
			<!-- 语音/文本框/表情/商品/更多 -->
			<view class="input-box">
				<!-- 语音 10% -->
				<view class="speak-box input-box-item">
					<image class="input-box-pic" src="../../static/pic/chat/speak.png" mode=""></image>
				</view>
				<!-- 文本框/表情 60% -->
				<view class="text-box">
					<input class="text" type="text" />
					<view class="emoji-box">
						<image class="input-box-pic" src="../../static/pic/chat/smile.png" mode=""></image>
					</view>
				</view>
				<!-- 商品 -->
				<view class="goods input-box-item">
					<image class="input-box-pic" src="../../static/pic/chat/goods.png" mode=""></image>
				</view>
				<!-- 更多 -->
				<view class="more input-box-item">
					<image class="input-box-pic" src="../../static/pic/chat/more.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_id: null,
				duixiang_data: null,
				bottomArr: [{
					tid: "toolchuoyichuo",
					pic: "../../static/pic/chat/point.png",
					text: "戳一戳"
				}, {
					tid: "toolzuoguilian",
					pic: "../../static/pic/chat/guilian.png",
					text: "做鬼脸"
				}, {
					tid: "tooldazhaohu",
					pic: "../../static/pic/chat/gesture-hello.png",
					text: "打招呼"
				}, {
					tid: "toolbixin",
					pic: "../../static/pic/chat/gesture-love.png",
					text: "比心"
				}],
				chat_uesr_data: [{
						user_id: "user63838945235",
						pic: '../../static/image/user/user02.jpg',
						name: "李四",
						msg: '',
						online: true,
						upImg: true
					},
					{
						user_id: 'user16709678545235',
						pic: "../../static/image/user/user01.jpg",
						name: "张三",
						msg: '',
						online: false,
						upImg: true
					}, {
						user_id: 'shop14157259022',
						pic: "../../static/pic/message/shangpu.png",
						name: "啥都送免费送书店",
						msg: '',
						online: true,
						upImg: false
					}
				],
				self_user_data: {
					uid: '123456789',
					pic: "../../static/image/user/user-self.png"
				},
				msgArr: [{
						mid: '20240727124130001',
						msgTime: '7月24日 12:41',
						me: false,
						msg: "你好,在吗,吃饭了吗?",
						share: false
					},
					{
						mid: '20240727124130002',
						msgTime: '7月24日 12:41',
						me: false,
						msg: "你好,在吗,吃饭了吗?",
						share: false
					},
					{
						mid: '20240727124130003',
						msgTime: '7月24日 12:41',
						me: true,
						msg: "你好,在吗,吃饭了吗?",
						share: false
					},
					{
						mid: '20240727124130004',
						msgTime: '7月24日 12:41',
						me: true,
						msg: "你好,在吗,吃饭了吗?",
						share: false
					},
					{
						mid: '20240727124130005',
						msgTime: '7月24日 12:41',
						me: false,
						msg: "你好,在吗,吃饭了吗?",
						share: false
					},
					{
						mid: '20240727124130006',
						msgTime: '7月24日 12:41',
						me: false,
						msg: "你好,在吗,吃饭了吗?",
						share: false
					}, {
						mid: '20240727124130007',
						msgTime: '7月24日 12:41',
						me: true,
						msg: "你好,在吗,吃饭了吗?",
						share: false
					},
					{
						mid: '20240727124130008',
						msgTime: '7月24日 12:41',
						me: true,
						msg: "你好,在吗,吃饭了吗?",
						share: false
					},
					{
						mid: '20240727124130009',
						msgTime: '7月24日 12:41',
						me: true,
						msg: "你好,在吗,吃饭了吗?",
						share: false
					},
					{
						mid: '20240727124130010',
						msgTime: '7月24日 12:41',
						me: true,
						msg: "你好,在吗,吃饭了吗?",
						share: false
					},
					{
						mid: '20240727124130011',
						msgTime: '7月24日 12:41',
						me: true,
						msg: "你好,在吗,吃饭了吗?",
						share: false
					},
				]
			};
		},
		onLoad(options) {
			this.user_id = options.user_id
			this.chat_uesr_data.map(data => {
				if (data.user_id == this.user_id) this.duixiang_data = data
			})
			if (!this.duixiang_data) {
				setTimeout(() => {
					this.back()
				}, 3000)
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	uni-page,
	.big-box {
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background-color: rgb(239, 239, 239);
	}

	.top-box {
		position: sticky;
		top: 0;
		padding: 0 2%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 96%;
		height: 120rpx;
		background-color: rgb(239, 239, 239);
		z-index: 99;

		.top-left-box {
			display: flex;

			.back-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;

				.back-btn-pic {
					width: 60%;
					height: 60%;
					cursor: pointer;
				}
			}

			.other-info {
				display: flex;
				flex-direction: column;

				.other-name {
					display: flex;
					align-items: center;
					font-size: 38rpx;
					font-weight: 600;
				}

				.other-online {
					font-size: 26rpx;
				}
			}
		}

		.top-right-box {
			.top-more {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80rpx;
				height: 80rpx;

				.top-more-pic {
					width: 80%;
					height: 80%;
				}
			}
		}
	}

	.bottom-box {
		padding: 0 2%;
		position: sticky;
		bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 96%;
		height: 200rpx;
		background-color: rgb(239, 239, 239);

		.fast-emoji {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 80rpx;
			padding: 10rpx 0;

			.fast-emoji-item {
				padding: 0 10rpx;
				display: flex;
				align-items: center;
				height: 60rpx;
				background-color: rgb(246, 246, 246);
				border-radius: 30rpx;
				cursor: pointer;

				.fast-emoji-pic {
					margin-right: 10rpx;
					display: flex;
					align-items: center;
					height: 40rpx;
					width: 40rpx;
				}
			}

		}

		.input-box {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 5rpx 0;
			height: 90rpx;
			width: 100%;

			.speak-box {}

			.text-box {
				display: flex;
				align-items: center;
				background-color: #fff;
				width: 380rpx;
				border-radius: 30rpx;
				padding-left: 20rpx;

				.text {
					width: 290rpx;
					font-size: 34rpx;
				}

				.emoji-box {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					width: 90rpx;

					.input-box-pic {
						width: 60%;
						height: 60%;
					}
				}
			}

			.goods {}

			.more {}

			.input-box-item {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				width: 90rpx;
				border-radius: 30rpx;
				background-color: #fff;

				.input-box-pic {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 80%;
					height: 80%;
				}
			}
		}



	}

	.msg-box {
		display: flex;
		flex-direction: column;
		width: 96%;
		height: 100%;
		padding: 0 2%;
		margin-bottom: 20rpx;

		.msg-item {
			display: flex;
			flex-direction: column;
		}

		.msg-time {
			margin: 10rpx 0;
			display: flex;
			justify-content: center;
			font-size: 26rpx;
			color: rgb(131, 131, 131);
		}

		.msg-content-box {
			display: flex;
			flex-direction: row;
		}

		.other-msg {
			display: flex;
			justify-content: flex-start;
			width: 15%;
		}

		.self-msg {
			display: flex;
			justify-content: flex-end;
			width: 15%;
		}

		.touxiang {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90rpx;
			height: 90rpx;
			border-radius: 20rpx;
			background-color: rgb(248, 105, 38);

			.full-pic {
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 20rpx;
				width: 100%;
				height: 100%;
			}

			.small-pic {
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 20rpx;
				width: 70%;
				height: 70%;
			}
		}

		.left-msg {
			display: flex;
			justify-content: flex-start;
		}

		.right-msg {
			display: flex;
			justify-content: flex-end;
		}

		.msg-content {
			display: flex;
			width: 70%;

			.msg-send {
				padding: 20rpx 30rpx;
				background-color: rgb(255, 249, 235);
				border-radius: 30rpx;
			}
		}

	}
</style>